<template>
	<view class="mainlayout pageBg2">
		<view class="fill" :style="{height: navBarHeight() + 'px'}">

		</view>
		<custom-nav-bar></custom-nav-bar>
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
				autoplay>
				<swiper-item v-for="item in 6">
					<image :src="'../../static/images/banner/banner'+ item + '.jpg'" mode="aspectFill"></image>
				</swiper-item>

			</swiper>
		</view>

		<view class="recommend">
			<common-title>
				<template #name>智能推荐</template>
				<template #interest>
					<button size="mini" class="buttonInterest" @click="toInterest">选择兴趣</button>
				</template>
			</common-title>
		</view>

		<view class='index'>
			<scroll-view scroll-x="true" class='scroll-content  no-scrollbar' :scroll-into-view='scrollIntoIndex'>
				<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='item.id'
					@tap='changeTab(item.id,index)'>

					<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.categoryName}}</text>
				</view>
			</scroll-view>
			
			
			 <swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
			        <swiper-item v-for="item in topBar" :key="item.id">
			          <view class="home-data">
			            <course v-for="course in item.courseList" :key="course.courseId" :courseInfo="course"></course>
			          </view>
			        </swiper-item>
			      </swiper>

			<!-- <swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
				<swiper-item v-for="item in topBar" :key="item.id">
					<view class="home-data">
						<course v-for="course in courseList" :key="course.courseId" :courseInfo="course"></course>
					</view>
				</swiper-item>
			</swiper>
			 -->
		</view>
		<view class="safe-area-inset-bottom">
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from "vue"
	import {
		navBarHeight
	} from "../../utils/system.js"
	import apis from "../../api/apis.js"
	import {
		onReady
	} from '@dcloudio/uni-app'

	//swiper内容块的高度
	const clentHeight = ref(0)
	// 定义菜单分类标签所对应的下标
	const topBarIndex = ref(0);
	// 定义菜单分类标签
	const topBar = ref([]);
	// 定义单个兴趣对应的课程列表
	const courseList = ref([]);
	
	const isFirst = ref(false);
	// 获取导航栏里的兴趣菜单
	const getInterest = async () => {
		try {
			const res = await apis.interestTagSelect();
			// topBar.value = res.data;
			 topBar.value = res.data.map(item => ({
			      ...item,
			      courseList: []
			    }));
			// console.log(topBar.value);
			isFirst.value = true;
			console.log("执行getInterest了")
			changeTab(topBar.value[0].id, 0);
		} catch (error) {
			console.log("获取导航栏里的兴趣菜单失败...");
		}
	}

let isFetching = false; // 添加一个标志位
	const changeTab = (id, index) => {
		// 这里加了这个 需要多一个判断条件 否则 首次进入页面加载第一个标签的数据是不会被执行的
		if (topBarIndex.value === index && !isFirst.value) {
			 // isFetching = false; // 如果状态未改变，重置标志位 这里不需要了
			 // isFirst.value = false; 不能在这里改状态 因为首次加载 不走这个条件
			 // console.log("isFirst" + isFirst.value);
			return;
		}
		// 上面的判断 如果放到下面这行代码后面  
		// 那么当用户重复点击同一标签后,虽然不会重复发送网络请求,但是数据也没有了
		topBar.value[index].courseList = [];    //这种是同步执行的代码
		 if (isFetching) return; // 如果正在请求，则直接返回
		  isFetching = true; // 设置标志位为 true
		setTimeout(() => {
			getHomeDataHeight();
		}, 100); // 等待 DOM 完全渲染完成
		
		// 改变状态
		isFirst.value = false
		
		// console.log("isFirs")
		// console.log(isFirst.value)
		apis.getCourseByInterest(id).then((res) => {
			// courseList.value = res.data;
			 topBar.value[index].courseList = res.data;
			// console.log(courseList.value);
			  isFetching = false; // 请求完成后重置标志位
		}).catch((error) => {
			  isFetching = false; // 请求完成后重置标志位
			console.error("获取课程数据失败:", error);
		});
		
		
		topBarIndex.value = index;
		scrollIntoIndex.value = "top" + index;
		// console.log(index);
		
		// 这里可以不写,因为上面每次请求都会把courseList数据覆盖掉
		// courseList.value = [];  
		 // topBar.value[index].courseList = [];  写到前面点
		
		// 不加延时,那么打印出来的课程列表会是上次的
		// 因为上面还在请求新的课程列表数据,异步直接执行了这里
		// setTimeout(()=>{
		// 	console.log("courseList.value")
		// 	console.log(courseList.value)
		// },500)


	}

	const onChangeTab = (e) => {
		// changeTab(e.detail.current);
		// console.log(e.detail.current);
		// console.log(1111);
		changeTab(topBar.value[e.detail.current].id, e.detail.current);
	}

	const scrollIntoIndex = ref("top0");

	// 跳转到选择兴趣页面
	const toInterest = () => {
		uni.navigateTo({
			url: "/pages/interest/interest"
		})
	}


	// 获取内容块的高度赋值
	const getHomeDataHeight = () => {
		const view = uni.createSelectorQuery().select('.home-data');
		view.boundingClientRect((data, viewport) => {
			if (data) {
				console.log(data)
				clentHeight.value = data.height;
				// console.log(2222);
			} else {
				console.error('BoundingClientRect returned null');
			}
		}).exec();
	};
	// 初始化时获取数据
	onReady(() => {
		// changeTab(topBar.value[0]?.id, 0); // 使用可选链操作符确保安全访问
		// 延迟获取内容块的高度
		nextTick(() => {
			setTimeout(() => {
				getHomeDataHeight();
			}, 100); // 等待 DOM 完全渲染完成
		});
	});
	getInterest();
</script>

<style lang="scss" scoped>
	.mainlayout {
		.banner {
			width: 750rpx;
			padding: 30rpx 0;

			swiper {
				width: 750rpx;
				height: 340rpx;

				&-item {
					width: 100%;
					height: 100%;
					padding: 0 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}

		.recommend {
			padding-top: 50rpx;

			.buttonInterest {
				color: royalblue;
				background-color: lightskyblue;
				border-radius: 10rpx;
			}
		}

		.index {
			.scroll-content {
				width: 100%;
				height: 80rpx;
				white-space: nowrap;
			}
			
			// 去除滚动轴
			.no-scrollbar {
			  /* 隐藏滚动条 */
			  ::-webkit-scrollbar {
			    width: 0 !important; /* 隐藏水平滚动条 */
			    height: 0 !important; /* 隐藏垂直滚动条 */
			  }
			}

			.scroll-item {
				display: inline-block;
				padding: 10rpx 30rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				padding: 10rpx 0;
				border-bottom: 6rpx solid #49BDFB;
				color: #49BDFB;
			}

			.f-color {
				color: #636263;
			}

		}
	}
</style>